<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            height: 1500px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .box,
        .none {
            margin: 50px auto 0px;
            width: 600px;
            border: 2px solid black;
            display: flex;
            flex-direction: column;
        }

        .box div {
            margin: 20px auto 0px;
        }

        .box input {
            height: 30px;
            width: 500px;
        }

        span {
            display: inline-block;
            width: 80px;
        }

        td {
            border: 1px solid rgb(54, 12, 241);
            text-align: center;
            padding: 4px;
        }

        table {
            border-collapse: collapse;


        }

        .none {
            position: absolute;
            display: flex;
            flex-direction: column;
            height: 350px;
            top: 500px;
            right: 660px;
            background-color: aqua;
            display: none;
        }

        .save {
            margin: 30px 80px 10px 100px;
            width: 150px;
            font-size: 20px;
            text-align: center;
            height: 30px;

        }

        .none div {
            margin: 20px auto 0px;

        }

        .none input {
            height: 30px;
            width: 500px;
        }

        .none button {
            margin: 10px 80px 10px 100px;
            width: 150px;
            font-size: 20px;
            text-align: center;
            height: 30px;
        }

        table {
            width: 600px;
            margin: 20px auto 0px;
        }
    </style>

</head>

<body>


    <div class="box">
        <div><span>姓 名:</span><input name="name" type="text" placeholder="只能包含数字字母下划线,且数字不能开头,长度在8~16之间"></div>
        <div> <span>联系电话:</span><input name="phone" type="text" maxlength="11" minlength="11"
                placeholder="1fdslfsd 如果格式有错误输入框变红提示"></div>

        <div><span>学 历:</span><input name="study" type="text" placeholder="如果校验正确,绿色表示通过"></div>
        <div><span>年 龄:</span><input name="age" type="text" placeholder="Amount"></div>
        <div><span>期望薪资:</span><input name="es" type="text" placeholder="Amount"></div>


        <button class="save">保存</button>
    </div>

    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>联系电话</td>
                <td>学历</td>
                <td>年龄</td>
                <td>期望薪资</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>


    <div class="none">
        <h2>表单</h2>
        <hr>
        <div><span>姓 名:</span><input name="rname" type="text" placeholder="只能包含数字字母下划线,且数字不能开头,长度在8~16之间"></div>
        <div> <span>联系电话:</span><input name="rphone" type="text" maxlength="11" minlength="11"
                placeholder="1fdslfsd 如果格式有错误输入框变红提示"></div>

        <div><span>学 历:</span><input name="rstudy" type="text" placeholder="如果校验正确,绿色表示通过"></div>
        <div><span>年 龄:</span><input name="rage" type="text" placeholder="Amount"></div>
        <div><span>期望薪资:</span><input name="res" type="text" placeholder="Amount"></div>
        <button name="rsave">保存</button>


    </div>

    <script src="./jquery.min.js"></script>


    <script>
        setPage();
        let a
        // 失去焦点判断
        $('[name="name"]').blur(() => {
            $('[name="name1"]').css('outline', '2px solid green')
        })
        $('[name="phone"]').blur(() => {
            $('[name="name1"]').css('outline', '2px solid green')
        })
        //点击触发
        $('[class="save"]').click(function () {
            let name = $('[name="name"]').val();
            let study = $('[name="study"]').val();
            let age = $('[name="age"]').val();
            let phone = $('[name="phone"]').val();
            let es = $('[name="es"]').val();


            // 判断
            if (name === '' || phone === '' || age === '' || study === '' || es === '') {
                window.alert('请把信息填完');
                return;
            }
            let obj = { name: name, phone: phone, study: study, age: age, es: es };

            // 获取localStorage
            let mes = window.localStorage.mes;

            if (mes === undefined) {
                // 转化
                obj = JSON.stringify([obj]);
                // 存储
                window.localStorage.mes = obj;
            } else {
                mes = JSON.parse(mes)
                mes.unshift(obj)
                window.localStorage.mes = JSON.stringify(mes)
            }
            setPage();


        })
        // 编辑删除
        const oTbody = document.querySelector('tbody');
        oTbody.addEventListener('click', function (event) {
            let mes = JSON.parse(window.localStorage.mes);

            if (event.target.getAttribute('name') === 'del') {
                for (let i = 0; i <= mes.length - 1; i++) {
                    if (mes[i].phone === event.target.getAttribute('class')) {
                        mes.splice(i, 1)
                    }

                }
                window.localStorage.mes = JSON.stringify(mes)
                setPage()
            } else if (event.target.getAttribute('name') === 'reset') {
                $('div').css('display', 'block')
                a = event.target.getAttribute('id')
            }

        })

        $('[class="rsave"]').click(function () {
            let mes = JSON.parse(window.localStorage.mes);

            let name = $('[name="rname"]').val();
            let phone = $('[name="rphone"]').val();
            let study = $('[name="rstudy"]').val();
            let age = $('[name="rage"]').val();
            let es = $('[name="res"]').val();


            for (let i = 0; i <= mes.length - 1; i++) {

                if (mes[i].phone === a) {

                    mes[i].name = name;
                    mes[i].phone = phone;
                    mes[i].study = study;
                    mes[i].age = age;
                    mes[i].es = es;


                }
                if (name === '' || phone === '' || study === '' || age === '' || es === '') {
                    window.alert('请填入数据');
                    return;
                }
                window.localStorage.mes = JSON.stringify(mes)
                setPage()
            }

            $('div').css('display', 'none')

        })
        // 动态渲染生成
        function setPage() {
            let mes = window.localStorage.mes;

            if (mes === undefined) {
                let arr = []
                window.localStorage.mes = JSON.stringify(arr)
            } else {
                mes = JSON.parse(mes);
            }
            if (mes.length === 0) {
                $('tbody').html(`<tr><td colspan="6">请你赶快写入</td></tr>`)
            } else {
                let str = ``
                mes.forEach(item => {
                    str += `
                    <tr>
                    <td>${item.name}</td>
                    <td>${item.phone}</td>
                    <td>${item.study}</td>
                    <td>${item.age}</td>
                    <td>${item.es}</td>
                    <td><button name="del" class="${item.phone}">删除</button><button name="reset" id="${item.phone}">重置</button></td>
                    </tr>
                    `
                })
                $('tbody').html(str)
            }
        }
    </script>
</body>

</html>